<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>小测试</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        .tccDraw{
            width: 100%;
            height: 600px;
        }
    </style>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="js/OBJLoader.js"></script>
</head>

<body>
    <div id="tccDraw" class="tccDraw">
    </div>
    <input type="button" class="big" value="放大" onclick="zoomOut()" style="float: right;">
    <input type="button" class="big" value="正方体放大" onclick="BoxIn()" style="float: right;">
    <input type="button" class="big" value="正方体缩小" onclick="BoxOut()" style="float: right;">
    <script>
        let scene, camera, renderer, labelRenderer, controls, showDiv, directionalLight,mesh,stats;

        /* 场景 */
        function initScene() {
            showDiv = document.getElementById("tccDraw");
            scene = new THREE.Scene();
            let axesHelper = new THREE.AxesHelper(500);
            scene.add(axesHelper);
        }
        /* 相机 */
        function initCamera() {
            //透视相机
            camera = new THREE.PerspectiveCamera(45, showDiv.clientWidth / showDiv.clientHeight, 10, 15000);
            camera.position.set(0, 500, 350);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
        }

        /* 渲染器 */
        function initRender() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(showDiv.clientWidth, showDiv.clientHeight);
            showDiv.appendChild(renderer.domElement);
        }

        /* 灯光 */
        function initLight() {
            let ambientLight = new THREE.AmbientLight(0xCCCCCC);
            scene.add(ambientLight);
            directionalLight = new THREE.DirectionalLight(0x585858);
            directionalLight.position.set(0, 3500, 0);
            scene.add(directionalLight);
        }

        /* 控制器 */
        function initControls() {
            controls = new THREE.OrbitControls(camera, showDiv);
        }

        /* 初始化性能插件status */
        function initStats(){
            stats = new Stats();
            document.body.appendChild(stats.dom);
        }
        
        /*绘制点，参数为鼠标点击的位置*/
        function printPoint(x,y){
        
        }
        /*
        未完成鼠标点击生成一个点
        */
        function mouseOnClick(event){
            var raycaster = new THREE.Raycaster();
            var mouse = new THREE.Vector2();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
            var planeGround = new THREE.Plane(normal, 0);
            var normal = new THREE.Vector3(0, 1, 0);
            raycaster.setFromCamera(mouse, camera);
            var ray = raycaster.ray;
            var intersects = ray.intersectPlane(planeGround);
            var pointsArray = [];
            //已经获取到点击的点 创建像素点
            var pointsGeometry = new THREE.SphereGeometry(2,100,100);
            var pointsMaterial = new THREE.PointsMaterial({color:0xff0000});
            var points = new THREE.Points(pointsGeometry, pointsMaterial);
            points.position.set(10,20,30)
            scene.add(points);
        }

        /*绘制实线、虚线*/
        function addLine(){
            var p1 = new THREE.Vector3(200,200,200);
            var p2 = new THREE.Vector3(100,100,100);
            var p3 = new THREE.Vector3(300,100,100);
            var ponits = [p1,p2,p3];
            var lineGeometry = new THREE.BufferGeometry();//生成几何体
            lineGeometry.setFromPoints(ponits);
            var material = new THREE.LineBasicMaterial({
                color:0xffffff,
            });
            var line = new THREE.Line(lineGeometry,material);
            scene.add(line);
            //虚线
            var p4 = new THREE.Vector3(500,200,200);
            var p5 = new THREE.Vector3(300,100,100);
            var p6 = new THREE.Vector3(300,200,100);
            var ponits2 = [p4,p5,p6];
            var lineGeometry2 = new THREE.BufferGeometry();//生成几何体
            lineGeometry2.setFromPoints(ponits2);
            var material2 = new THREE.LineDashedMaterial({
                color:0xff0000,
                dashSize:10,
                gapSize: 3//短划线之间的距离
            });
            var line2 = new THREE.Line(lineGeometry2,material2);
            line2.computeLineDistances();//不可或缺的，若无，则线段不能显示为虚线
            scene.add(line2);
        }

        /*创建平面*/
        function addPlane(){
            //空心
            var planeGeo = new THREE.PlaneGeometry(30,50);
            var mesh = new THREE.MeshBasicMaterial({
                color:0xff0354
            });
            mesh.side = THREE.DoubleSide;
            mesh.wireframe = true;
            var plane = new THREE.Mesh(planeGeo,mesh);
            plane.position.set(10,80,80);
            scene.add(plane);
            //实心
            var planeGeo2 = new THREE.PlaneGeometry(50,80);
            var mesh2 = new THREE.MeshBasicMaterial({
                color:0xff0000
            });
            mesh2.side = THREE.DoubleSide;
            var plane2 = new THREE.Mesh(planeGeo2,mesh2);
            plane2.position.set(20,100,100);
            scene.add(plane2);
        }


        /*构建各个面颜色随机的立方体*/
        function addBox(){
            var cubeGeo = new THREE.BoxGeometry(50,50,50);
            var mats = [];
            for(var i=0;i<6;i++){
                var material = new THREE.MeshBasicMaterial({ color: new THREE.Color(Math.random(0,5) * 0xffffff)});
                mats.push(material);
            }
            mesh = new THREE.Mesh(cubeGeo, mats);
            scene.add(mesh);
        }

        /*添加OBJ模型*/
        function addOBJ(){
            console.log("触发了添加OBJ模型的方法")
            var OBJLoader = new THREE.OBJLoader();//obj加载器
            OBJLoader.load("models/cerberus/Cerberus.obj",function(obj){
                var object = obj;
                object.scale.set(3,3,3);
                object.children[0].material.color.set(0xffffff);
                object.rotation.x = 1;
                object.rotation.y = 0.3;
                console.log("添加OBJ模型")
                scene.add(object);
            });
        }
        /* 键盘按下的监听触发方法 */
        function onKeydown(event){
            console.log(event.keyCode);
            if(event.keyCode == '32'){
              mesh.visible = false;  
            }else if(event.keyCode == '27'){
                mesh.visible = true;  
            }
        }
        /* 场景放大的放大 */
        function zoomOut(){
            controls.zoomIn();
        }
        /* 正方体放大 */
        function BoxIn(){
            mesh.scale.set(1.5,1.5,1.5);
            mesh.position.set(100,100,100);
        }
        /* 正方体缩小 */
        function BoxOut(){
            mesh.scale.set(0.2,0.2,0.2);
            mesh.position.set(0,0,0);
        }
        window.addEventListener('click',mouseOnClick,false)
        window.addEventListener("keydown",onKeydown,false)
        initScene();
        initCamera();
        initLight();
        initControls();
        initRender();
        addLine();
        addPlane();
        addBox();
        initStats();
        addOBJ();
        animate();
        /* 循环渲染 */
        function animate() {
            mesh.rotateY(0.01);
            mesh.rotateX(0.01);
            mesh.rotateZ(0.01);
            stats.update();
            controls.update();
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
    </script>
</body>

</html>